<template>
  <a-form-model ref="logonForm" :model="logonForm" :rules="rules" v-bind="layout">
    <a-form-model-item label="用户名" prop="username">
      <a-input v-model="logonForm.username" />
    </a-form-model-item>
    <a-form-model-item has-feedback label="邮箱" prop="email">
      <a-input v-model="logonForm.email" />
    </a-form-model-item>
    <a-form-model-item label="密码" prop="password">
      <a-input v-model="logonForm.password" type="password" autocomplete="off" />
    </a-form-model-item>
    <a-form-model-item label="确认密码" prop="confirm">
      <a-input v-model="logonForm.confirm" type="password" autocomplete="off" />
    </a-form-model-item>
    <a-form-model-item has-feedback label="验证码" prop="verCode"
      :validateStatus="codeStatus"
      :wrapper-col="{ span: 6 }"
      style="position: relative;"
    >
      <a-input v-model="logonForm.verCode" :maxLength="6" />
      <a-button :loading="sending" style="
          margin-left: 10px;
          width: 80px;
          position: absolute;
          top: -7px;
          left: 140px;
        " @click="send">
        发送
      </a-button>
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
      <a-button :loading="loading" type="primary" @click="submitForm('logonForm')">
        Logon
      </a-button>
      <a-button style="margin-left: 30px" type="link" @click="resetForm('logonForm')">
        Reset<a-icon style="font-size: 12px;" type="sync" />
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
// import * as api from '@/api/user';
import debounce from '@/utils/debounce';
import delay from '@/utils/delay';

export default {
  data() {
    const checkUser = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('用户名不能为空'));
      } if (value.length < 2 || value.length > 18) {
        return callback(new Error('用户名长度应为2-18位'));
      }
      return callback();
    };
    const mailReg = /^[\w-_]+@[\w.-_]+com$/;
    const checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('邮箱不能为空'));
      }
      if (mailReg.test(value)) callback();
      else callback(new Error('邮箱格式不正确'));
      return null;
    };
    const checkPass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入密码'));
      } if (value.length < 6 || value.length > 18) {
        return callback(new Error('密码长度应为6-18位'));
      }
      return callback();
    };
    const checkConf = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请确认密码'));
      } if (value !== this.logonForm.password) {
        return callback(new Error('两次输入的密码不一致'));
      }
      return callback();
    };
    return {
      logonForm: {
        username: '',
        email: '',
        password: '',
        confirm: '',
        verCode: '',
      },
      rules: {
        username: [{ validator: debounce(checkUser), trigger: 'change' }],
        email: [{ validator: debounce(checkEmail), trigger: 'change' }],
        password: [{ validator: debounce(checkPass), trigger: 'change' }],
        confirm: [{ validator: debounce(checkConf), trigger: 'change' }],
      },
      layout: {
        // span元素占多宽  offset左侧偏移量
        labelCol: { span: 4, offset: 2 },
        wrapperCol: { span: 12 },
      },
      // 表单加载状态
      loading: false,
      // 验证码发送状态
      sending: false,
      codeStatus: '',
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.loading = true;
          const res = await this.validateVerCode();
          if (!res) {
            this.loading = false;
            return null;
          }
          // 注册 TODO
          await delay(2000);
          this.loading = false;
        }
        return true;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    send() {
      this.$refs.logonForm.validateField('email', async (errorMsg) => {
        if (!errorMsg) {
          // 邮箱验证通过
          this.sending = true;
          // 发送验证码 TODO
          await delay(2000);
          this.sending = false;
          this.$message.success('已发送');
        }
      });
    },
    async validateVerCode() {
      this.codeStatus = '';
      await delay(0);
      if (this.logonForm.verCode === '') {
        this.$message.warn('请获取并填写验证码');
        this.codeStatus = 'warning';
        return false;
      }
      this.codeStatus = 'validating';
      // 验证验证码 TODO
      await delay(1000);
      this.codeStatus = '';
      return true;
    },
  },
};
</script>
